<template>
  <div class="view">
    <el-row class="handle-box" :model="filters">
      <el-col :span="8">
        <el-button class="jianbianbule" type="primary" icon="el-icon-plus" @click="handleAdd">{{
          $t("curvecon.curvepara")
        }}</el-button>
      </el-col>
      <el-col :span="16" style="text-align: right;">
      <span>{{ $t("curvecon.curveName") }}：</span>
      <el-input
        v-model="filters.curveName"
        @keyup.native.enter="search"
        :placeholder="$t('public.text')"
        clearable
      ></el-input>
      <span>{{ $t("curvecon.control") }}：</span>
      <el-select
        v-model="filters.ctypes"
        filterable
        clearable
        @change="search"
        :placeholder="$t('public.select')"
      >
        <el-option
          v-for="item in ctypes"
          :key="item.curveType"
          :label="item.curveTypeName"
          :value="item.curveType"
        >
        </el-option>
      </el-select>

      <el-button
        class="seacthsbtn"
        type="primary"
        id="btn"
        @click="search"
        icon="el-icon-search"
        >{{ $t("public.search") }}</el-button
      >
      </el-col>
    </el-row>
    <div class="tablebox">
      <template>
        <el-table :data="tables" size="mini" stripe class="tablefisbox">
          <el-table-column type="index" :label="$t('public.number')" width="80">
          </el-table-column>
          <el-table-column prop="curveName" :label="$t('curvecon.curveName')">
          </el-table-column>
          <el-table-column
            prop="curveTypeName"
            :label="$t('curvecon.control')"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="curveUnitName"
            :label="$t('curvecon.unit')"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="tableName"
            :label="$t('curvecon.tableName')"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="cmax" :label="$t('curvecon.cmax')" width="150">
          </el-table-column>
          <el-table-column prop="cmin" :label="$t('curvecon.cmin')" width="150">
          </el-table-column>
          <el-table-column prop="params" :label="$t('curvecon.params')">
          </el-table-column>
          <el-table-column :label="$t('public.operation')" width="250">
            <template slot-scope="scope">
              <el-button
                type="warning"
                icon="el-icon-edit"
                round
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >{{ $t("public.edit") }}</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                round
                size="mini"
                @click="handleDel(scope.$index, scope.row)"
                >{{ $t("public.del") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!--工具条-->
      <el-col class="pages">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageSize"
          :total="total"
        >
        </el-pagination>
      </el-col>

      <!--编辑界面-->
      <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        width="650px"
      >
        <el-form :model="editForm" :rules="editFormRules" ref="editForm">
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.curveName')" prop="curveName">
                <el-input v-model="editForm.curveName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.control')" prop="ctypes">
                <el-select
                  v-model="editForm.ctypes"
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in ctypes"
                    :key="item.curveType"
                    :label="item.curveTypeName"
                    :value="item.curveType"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.curveUnit')" prop="curveUnit">
                <el-select
                  v-model="editForm.curveUnit"
                  filterable
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in curveUnit"
                    :key="item.unitId"
                    :label="item.unitName"
                    :value="item.unitId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.cmax')" prop="cmax">
                <el-input v-model.number="editForm.cmax"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.cmin')" prop="cmin">
                <el-input v-model.number="editForm.cmin"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.tableName')" prop="tableName">
                <el-select
                  v-model="editForm.tableName"
                  @change="getParams"
                  filterable
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in tableName"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 深度参数 -->
          <el-row v-if="editForm.ctypes == 1">
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.cdepth')" prop="cdepth">
                <el-select
                  v-model="cdepth"
                  filterable
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in params"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.xdepth')" prop="xdepth">
                <el-select
                  v-model="xdepth"
                  filterable
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in params"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="editForm.ctypes == 1">
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.depth_c')" prop="depth_c">
                <el-select
                  v-model="depth_c"
                  filterable
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in params"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col></el-col>
          </el-row>
          <el-row v-if="editForm.ctypes == 2">
            <!-- 时间参数 -->
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.stime')" prop="stime">
                <el-select
                  v-model="stime"
                  filterable
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in params"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.time_c')" prop="time_c">
                <el-select
                  v-model="time_c"
                  filterable
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in params"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 测斜参数 -->
          <el-row v-if="editForm.ctypes == 3">
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.sew')" prop="sew">
                <el-select
                  v-model="sew"
                  filterable
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in params"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.sns')" prop="sns">
                <el-select
                  v-model="sns"
                  filterable
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in params"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="editForm.ctypes == 3">
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.dsvv')" prop="dsvv">
                <el-select
                  v-model="dsvv"
                  filterable
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in params"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.sdls')" prop="sdls">
                <el-select
                  v-model="sdls"
                  filterable
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in params"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="editForm.ctypes == 3">
            <el-col :span="12">
              <el-form-item :label="$t('curvecon.dsvm')" prop="dsvm">
                <el-select
                  v-model="dsvm"
                  filterable
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in params"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col></el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="dialogFormVisible = false" type="success">{{
            $t("public.cancelbtn")
          }}</el-button>
          <el-button
            v-if="dialogStatus == 'create'"
            type="primary"
            @click="createData"
            >{{ $t("public.savebtn") }}</el-button
          >
          <el-button v-else type="primary" @click="updateData">{{
            $t("public.changebtn")
          }}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogStatus: "", //编辑框界面切换
      textMap: {
        //添加与编辑界面
        update: this.$t("public.edit"),
        create: this.$t("public.create"),
      },
      dialogFormVisible: false, //弹窗
      filters: {
        curveName: "",
        ctypes: "",
      },
      //控件类型
      ctypes: [
        {
          curveType: 1,
          curveTypeName: "深度",
        },
        {
          curveType: 2,
          curveTypeName: "时间",
        },
        {
          curveType: 3,
          curveTypeName: "测斜",
        },
      ],
      curveUnit: [], //获取曲线单位下拉数据
      tableName: [], //获取表名下拉数据
      params: [], //获取参数下拉数据
      tables: [], //表格数据
      total: 0, //总共条数
      page: 1, //请求页
      limit: 10, //页条数
      pageSize: 1, //当前页
      //是否必填项
      editFormRules: {
        curveName: [
          { required: true, message: "请输入曲线名称", trigger: "blur" },
        ],
        curveUnit: [
          { required: true, message: "请选择曲线单位", trigger: "blur" },
        ],
        ctypes: [
          { required: true, message: "请选择控件类型", trigger: "blur" },
        ],
        tableName: [{ required: true, message: "请选择表名", trigger: "blur" }],
      },
      //编辑界面数据
      editForm: {
        curveName: "",
        ctypes: "",
        curveUnit: "",
        cmax: "",
        cmin: "",
        tableName: "",
        params: "", //参数集合
      },
      cdepth: "",
      xdepth: "",
      depth_c: "",
      stime: "",
      time_c: "",
      sew: "",
      sns: "",
      dsvv: "",
      sdls: "",
      dsvm: "",
    };
  },
  watch: {
    "filters.curveName"(val) {
      if (val.trim() === "") {
        this.getCurve();
      }
    },
    "filters.ctypes"(val) {
      if (val === "") {
        this.getCurve();
      }
    },
    "editForm.tableName"(val) {
      if (val.trim() === "") {
        this.getParams();
      }
    },
  },
  mounted() {
    this.getCurve();
    this.getTable();
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.getCurve();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.pageSize = val;
      this.getCurve();
    },
    //编辑参数
    handleEdit(index, row) {
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      if (row.curveType === 1) {
        this.cdepth = row.params.split(",")[0];
        this.xdepth = row.params.split(",")[1];
        this.depth_c = row.params.split(",")[2];
      } else if (row.curveType === 2) {
        this.stime = row.params.split(",")[0];
        this.time_c = row.params.split(",")[1];
      } else {
        this.sew = row.params.split(",")[0];
        this.sns = row.params.split(",")[1];
        this.dsvv = row.params.split(",")[2];
        this.sdls = row.params.split(",")[3];
        this.dsvm = row.params.split(",")[4];
      }
      this.editForm = {
        curveId: row.cuid,
        curveName: row.curveName,
        ctypes: row.curveType,
        curveUnit: row.curveUnit,
        cmax: row.cmax,
        cmin: row.cmin,
        tableName: row.tableName,
        createUser: JSON.parse(this.$store.state.userInfo).uid,
      };
    },
    //新增参数
    handleAdd() {
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.editForm = {
        curveName: "",
        ctypes: "", //设置默认1
        curveUnit: "",
        cmax: 0,
        cmin: 0,
        tableName: "",
        createUser: JSON.parse(this.$store.state.userInfo).uid,
      };
    },
    //模糊搜索
    search() {
      this.page = 1;
      this.limit = 10;
      this.pageSize = 1;
      this.getCurve();
    },
    //获取
    async getCurve() {
      try {
        let params = {
          CurveName: this.filters.curveName,
          Type: this.filters.ctypes,
          page: this.page,
          limit: this.limit,
        };
        let res = await this.$api.set.getCurve(params);
        this.total = res.count;
        this.tables = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    // 获取曲线表名下拉列表
    //曲线单位下拉数据
    async getTable() {
      let table = await this.$api.set.getTable();
      this.tableName = table.data;
      let res = await this.$api.set.unitSelect();
      this.curveUnit = res.data;
    },
    //获取曲线参数下拉列表
    async getParams() {
      let param = {
        tablename: this.editForm.tableName,
      };

      let params = await this.$api.set.getAllFiled(param);
      this.params = params.data;
      this.cdepth = this.params[0];
      this.xdepth = this.params[0];
      this.depth_c = this.params[0];
      this.stime = this.params[0];
      this.time_c = this.params[0];
      this.sew = this.params[0];
      this.sns = this.params[0];
      this.dsvv = this.params[0];
      this.sdls = this.params[0];
      this.dsvm = this.params[0];
    },
    //添加
    createData() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          if (this.editForm.ctypes === 1) {
            this.editForm.params =
              this.cdepth + "," + this.xdepth + "," + this.depth_c;
          } else if (this.editForm.ctypes === 2) {
            this.editForm.params = this.stime + "," + this.time_c;
          } else {
            this.editForm.params =
              this.sew +
              "," +
              this.sns +
              "," +
              this.dsvv +
              "," +
              this.sdls +
              "," +
              this.dsvm;
          }
          let params = Object.assign({}, this.editForm);
          let res = await this.$api.set.addCurve(params);
          if (res.code == 200) {
            this.$message({
              showClose: true,
              message: this.$t("public.addsuccess"),
              type: "success",
            });
            this.$refs["editForm"].resetFields(); //清空表单
            this.dialogFormVisible = false; //关闭弹窗
            this.getCurve(); //刷新数据
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        }
      });
    },
    //修改
    updateData() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          if (this.editForm.ctypes === 1) {
            this.editForm.params =
              this.cdepth + "," + this.xdepth + "," + this.depth_c;
          } else if (this.editForm.ctypes === 2) {
            this.editForm.params = this.stime + "," + this.time_c;
          } else {
            this.editForm.params =
              this.sew +
              "," +
              this.sns +
              "," +
              this.dsvv +
              "," +
              this.sdls +
              "," +
              this.dsvm;
          }
          let params = Object.assign({}, this.editForm);
          let res = await this.$api.set.editCurve(params);
          if (res.code == 200) {
            this.$message({
              showClose: true,
              message: this.$t("public.editsuccess"),
              type: "success",
            });
            this.$refs["editForm"].resetFields(); //清空表单
            this.dialogFormVisible = false;
            this.getCurve(); //刷新数据
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        }
      });
    },
    //删除
    handleDel(index, row) {
      // 二次确认删除
      this.$confirm(
        this.$t("public.confirmcontent"),
        this.$t("public.confirmtitle"),
        {
          type: "warning",
        }
      )
        .then(async () => {
          let params = {
            id: row.cuid,
            usid: JSON.parse(this.$store.state.userInfo).uid,
          };
          let res = await this.$api.set.removeCurve(params);
          if (res.code == 200) {
            this.$message.success(this.$t("public.confirmtips1"));
            this.getCurve(); //刷新数据
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch(() => {});
    },
    carTimeFilter(row, column, cellValue, index) {
      const daterc = row[column.property];
      if (daterc != null) {
        return this.$moment(daterc).format("YYYY-MM-DD HH:mm:ss");
      }
    },
  },
};
</script>